<template >
	<div class="contain-report">
		<div class="report-title">实验评测</div>
		<div class="report-search">
			<div></div>
			<el-input style="width: 300px"
					  placeholder="请输入"
					  v-model="form.name"
					  clearable
					  @clear="getEvaluatingList"
			>
				<i slot="suffix" class="el-input__icon el-icon-search" style="font-size: 20px;cursor: pointer" @click="getEvaluatingList"></i>
			</el-input>
		</div>
		
		<div class="report-table">
			<div class="table-header">
				<div class="table-box">资源名称</div>
				<div class="table-box">实验室</div>
				<div class="table-box">上传时间</div>
				<div class="table-box">操作</div>
			</div>
			<div class="tab-body">
				<div class="table-list" v-for="item in tableData" :key="item.id">
					<div class="list-show">{{item.name}}</div>
					<div class="list-show">{{item.laboratoryName}}</div>
					<div class="list-show">{{item.createTime}}</div>
					<div class="list-show">
						<el-button type="text" :disabled="item.type !== 0" @click="getInAnswer(item)">{{item.type === 0 ? '开始测评' : '答题完成'}} </el-button>
					</div>
				</div>
			</div>
		</div>
		
		<div class="report-page">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="1"
					:page-sizes="[5]"
					:page-size="5"
					layout="sizes, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
	</div>
</template >

<script >
	import { evaluatingList } from "../../api/evaluating";

    export default {
        name: "guidanceResources",
		data(){
            return{
                form:{
                    name: "",
                    pageIndex: 1,
                    pageSize: 5
                },
                tableData:[],
                total:null
			}
		},
		mounted() {
            this.getEvaluatingList()
        },
        methods: {
            async getEvaluatingList(){
                const { data } = await evaluatingList(this.form)
                if (data.code === 200){
                    this.tableData = data.data.data
                    this.total = data.data.total
                }
			},
            getInAnswer(item){
              this.$router.push({
				  name:"studentAnswer",
				  query:{
				      name:item.name,
					  id:item.id
				  }
			  })
			},
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getEvaluatingList()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getEvaluatingList()
            },
        },
    }
</script >

<style scoped lang="less">
	.contain-report {
		position: relative;
		width: 100%;
		height: 100%;
		padding: 20px;
		box-sizing: border-box;
		.report-title {
			font-size: 22px;
			color: #333;
		}
		.report-search{
			width: 100%;
			margin: 30px 0;
			padding: 0 5%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			/deep/.el-input__inner{
				border-radius: 20px;
			}
		}
		.report-table{
			width: 90%;
			margin: 0 auto;
			box-sizing: border-box;
			.table-header{
				width: 100%;
				height: 40px;
				background-color: #7fd1e5;
				border-radius: 20px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.table-box{
					width: 20%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 18px;
					font-weight: 500;
					color: #333333;
				}
			}
			.tab-body{
				width: 100%;
				background-color: #ffffff;
				padding: 20px 0;
				box-sizing: border-box;
				border-radius: 20px;
				.table-list{
					margin: 10px 0;
					width: 100%;
					padding-bottom: 10px;
					box-sizing: border-box;
					border-bottom: 1px solid #f0f0f0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.list-show{
						width: 20%;
						height: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 14px;
						color: #666;
					}
				}
			}
		}
		.report-page{
			position: absolute;
			bottom: 10px;
			left: 50%;
			width: 100%;
			transform: translateX(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style >
